<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字幕合并工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            /* 增加上下内边距，让内容离浏览器顶部和底部有更多空间 */
            padding: 40px 20px;
            background-color: #f4f4f9;
            color: #333;
        }

        .container {
            /*
            核心改动：
            1. max-width: 将最大宽度从 1200px 增加到 1800px。
               这个值可以根据您的喜好调整，例如 1600px, 2000px, 或者使用百分比，如 90%。
               1800px 在 2K 屏上会感觉很宽敞。
            2. margin: auto; 保持容器水平居中。
            */
            max-width: 1800px;
            margin: auto;
            background: #fff;
            padding: 30px; /* 增加容器内部的间距 */
            border-radius: 12px; /* 稍微增大圆角，看起来更柔和 */
            box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 稍微调整阴影效果 */
        }

        h1 {
            text-align: center;
            color: #333;
            /* 增加标题字体大小和下边距 */
            font-size: 2.2em;
            margin-bottom: 30px;
        }

        .input-area {
            display: flex;
            /* 增加输入框之间的间距 */
            gap: 30px;
            margin-bottom: 30px;
        }

        .input-box {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        textarea {
            width: 100%;
            /* 增加文本框的高度，更适合大屏幕 */
            height: 500px;
            padding: 15px;
            border: 1px solid #dcdcdc;
            border-radius: 6px;
            font-size: 16px; /* 增大字体，提高可读性 */
            line-height: 1.6; /* 增加行高 */
            box-sizing: border-box;
            resize: vertical;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        textarea:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
            outline: none;
        }

        label {
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 1.1em; /* 增大标签字体 */
        }

        .controls, .result-area {
            text-align: center;
        }

        button {
            padding: 15px 35px; /* 增大按钮尺寸 */
            font-size: 18px; /* 增大按钮字体 */
            cursor: pointer;
            border: none;
            border-radius: 6px;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s, transform 0.1s;
            margin: 10px 5px;
        }

        button:hover {
            background-color: #0056b3;
        }

        button:active {
            transform: scale(0.98); /* 增加点击效果 */
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        #result-output {
            margin-top: 20px;
            /* 增加结果框的高度 */
            height: 400px;
            background-color: #e9ecef;
        }

        #download-btn {
            background-color: #28a745;
        }
        #download-btn:hover {
            background-color: #218838;
        }

        .loader {
            border: 5px solid #f3f3f3; /* 增加加载动画的尺寸 */
            border-radius: 50%;
            border-top: 5px solid #3498db;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            display: none;
            margin: 20px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>

<div class="container">
    <h1>字幕合并工具</h1>

    <div class="input-area">
        <div class="input-box">
            <label for="novel-input">小说原文 (一行对应一句字幕)</label>
            <textarea id="novel-input" placeholder="请在此处粘贴小说原文..."></textarea>
        </div>
        <div class="input-box">
            <label for="srt-input">原始SRT字幕</label>
            <textarea id="srt-input" placeholder="请在此处粘贴SRT字幕内容..."></textarea>
        </div>
    </div>

    <div class="controls">
        <button id="merge-btn">开始合并</button>
    </div>

    <div class="loader" id="loader"></div>

    <div class="result-area">
        <label for="result-output">处理结果</label>
        <textarea id="result-output" readonly placeholder="处理结果将显示在这里..."></textarea>
        <button id="download-btn" disabled>下载SRT文件</button>
    </div>
</div>

<script>
    // JavaScript 部分无需改动，这里保持原样
    const novelInput = document.getElementById('novel-input');
    const srtInput = document.getElementById('srt-input');
    const mergeBtn = document.getElementById('merge-btn');
    const resultOutput = document.getElementById('result-output');
    const downloadBtn = document.getElementById('download-btn');
    const loader = document.getElementById('loader');

    mergeBtn.addEventListener('click', async () => {
        const novelText = novelInput.value.trim();
        const srtText = srtInput.value.trim();

        if (!novelText || !srtText) {
            alert('小说原文和字幕内容都不能为空！');
            return;
        }

        loader.style.display = 'block';
        mergeBtn.disabled = true;
        downloadBtn.disabled = true;
        resultOutput.value = '';

        try {
            const response = await fetch('http://parser-api.anmong.com/api/merge', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ novelText, srtText }),
            });

            const resultText = await response.text();

            if (response.ok) {
                resultOutput.value = resultText;
                downloadBtn.disabled = false;
            } else {
                alert(`处理失败: ${resultText}`);
            }
        } catch (error) {
            console.error('请求失败:', error);
            alert('请求失败，请检查网络连接或联系管理员。');
        } finally {
            loader.style.display = 'none';
            mergeBtn.disabled = false;
        }
    });

    downloadBtn.addEventListener('click', () => {
        const textToSave = resultOutput.value;
        if (!textToSave) {
            alert('没有可下载的内容。');
            return;
        }

        const blob = new Blob([textToSave], { type: 'text/srt;charset=utf-8' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = '-merged.srt';

        document.body.appendChild(link);
        link.click();

        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
    });
</script>

</body>
</html>